﻿@charset "utf-8";
/*!
* Date:2015-05-26
* Author:Elten
* ------------------------------
* Weibo:http://weibo.com/elten
* Email:letmo@163.com
* ------------------------------
* Operation record at the bottom
*/
body {color:#203158;background:#F59F2B}
.hide {display: none}
.mt5 {margin-top:5px;}
.mt10 {margin-top:10px !important;}
.mt20 {margin-top:20px !important;}
.mb10 {margin-bottom: 10px}
.text-danger {color:#E74C3C;}
.header { background:#3498db url('../img/bg@2x.jpg') no-repeat 0 0; background-size: 100% auto; width:100%; margin:0 auto; position: relative;  z-index: -1}
.header img {width:100%; }
#p-show i{font-size:30px; margin:5px;}
#p-show i.fa-male {color:#3498db;}
#p-show i.fa-female {color:#e74c3c;}
.footer-nav {position: relative; width: 100%; margin-left:0; margin-right:0; margin-bottom:15px;}
.footer-nav a {color:#ffffff; font-weight: bold; padding:10px 0; display: block;}
#mcover {background: rgba(0,0,0,.7); position: fixed; left:0; top:0; width:100%; height: 100%; display: none; z-index: 999;}
#mcover img {height: 180px;position: fixed; right: 18px; top: 5px; width: 260px; z-index: 1000;}
.timer {position: absolute; bottom:8px; left:50%; width:76px; height: 76px; margin-left:-38px; text-align: center; line-height: 76px; color:#ffffff; font-size: 30px; color:#1abc9c;}
.timer strong {color:#1abc9c;}
/*音乐控制按钮*/
.audio-controls {  cursor: pointer; height: 28px; right: 5px; position: absolute; top: 5px; width: 27px;background: url("../img/audio.png") no-repeat scroll -26px 0; opacity: .9; z-index:99;}
.audio-controls.off { background-position: 0 0; border-right: medium none;}
/*环形*/
.circle {
    margin:0 auto;
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 50%;
    background: #f0c514;
}
.pie_left, .pie_right {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 0;left: 0;
}
.left, .right {
    display: block;
    width:150px;
    height:150px;
    background:#F0C514;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
.pie_right, .right {
    clip:rect(0,auto,auto,90px);
}
.pie_left, .left {
    clip:rect(0,90px,auto,0);
}
.mask {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    left: 5px;
    top: 5px;
    background: #E67E22;
    position: absolute;
    text-align: center;
    line-height: 140px;
    font-size: 26px;
    font-weight: bold;
    color:#ffffff;
    box-shadow: 0px 0px 4px #E67E22;
}
/*按钮背景动画*/
.circle-bg {
    margin:0 auto;
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 50%;
    background: #F0C514;
    margin-bottom: -150px;
    transition:none;
    animation: fadeout-along .8s ease-in-out 0s infinite normal;
    -webkit-transition:none;   
    -webkit-animation: fadeout-along .8s  ease-in-out 0s infinite normal;
}
@keyframes fadeout-along {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}
@-webkit-keyframes fadeout-along {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
    }
}
/*按钮点击动画*/
.circle-bg.ed {
    opacity: 0;
    transition:none;
    animation: fadeout .9s ease-in-out 0s normal;
    -webkit-transition:none;   
    -webkit-animation: fadeout .9s  ease-in-out 0s normal;
}
@keyframes fadeout {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    70% {
        opacity: 0;
        transform: scale(1.5);
    }
}
@-webkit-keyframes fadeout {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
    70% {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
}
/*人物动画*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}
@-webkit-keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}